
<!DOCTYPE html>
<!-- 测试访问地址file:///D:/liukai/code/python3/sql2html/index.html?js=datajson.js -->
<html lang="cn">
<head>
    <script type="text/ecmascript" async>
    // 动态加载js
    function loadJS( url, callback ){
        var script = document.createElement('script'),
        fn = callback || function(){};
        // script.type = 'text/javascript';
        script.type = 'text/ecmascript';

        //IE
        if(script.readyState){
            script.onreadystatechange = function(){
                if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                    script.onreadystatechange = null;
                    fn();
                }
            };
        }else{
            //其他浏览器
            script.onload = function(){
                fn();
            };
        }
        script.src = url;
        script.async = true;
        document.getElementsByTagName('head')[0].appendChild(script);
    }


    </script>
    <!-- <script type="text/ecmascript" src="https://gitee.com/liukaigt/mydata/raw/master/dfzz/data/datajson.js"></script>  -->
    <!-- <script type="text/ecmascript" src="./data/datajson.js"></script>  -->
    <script type="text/ecmascript" >
    // 获取get参数
    function GetQueryString(name, defaultvalue)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return defaultvalue;
    }

    </script> 
    <!-- <script type="text/javascript" async> 
        loadJS('https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/jquery.min.js',function(){});
    loadJS('https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/jquery-ui.min.js',function(){});
    loadJS('https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/trirand/jquery.jqGrid.min.js',function(){});
    loadJS('https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/trirand/i18n/grid.locale-cn.js',function(){});
    loadJS('https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/jszip.min.js',function(){});

    </script> -->

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/jquery.min.js"></script> 
    <script type="text/ecmascript" src="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/jquery-ui.min.js"></script>

    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.-->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/trirand/i18n/grid.locale-cn.js"></script>

    <!-- 导出excel需要用，无导出功能可以不引入 -->
    <script type="text/javascript" language="javascript" src="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/js/jszip.min.js"></script>

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="https://liukaigt.gitee.io/www/jqgrid/Guriddo_jqGrid_JS_demo/css/trirand/ui.jqgrid.css" />

    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Toolbar Searching with Search Options</title>
</head>
<body>

    <style type="text/css">

        /* set the size of the datepicker search control for Order Date*/
        #ui-datepicker-div { font-size:11px; }
        
        /* set the size of the autocomplete search control*/
        .ui-menu-item {
            font-size: 11px;
        }

         .ui-autocomplete {
            font-size: 11px;
        }       

        /* 设置行高 */
        /* .jqgrow {
            height: 100px;
        } */

    </style>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
    <button id="export">导出Excel</button>
    <script type="text/javascript" defer> 

    //用法
    loadJS('https://gitee.com/liukaigt/mydata/raw/master/others/' + GetQueryString('js','datajson.js'),function(){
        // loadJS('./data/datajson.js',function(){
            // window.onload=(function () {
                // $(document).ready(function () {
        $("#jqGrid").jqGrid({
            // url: 'data.json',
            // mtype: "GET",
            datatype : "local",//请求数据返回的类型。可选json,xml,txt
            data: datajson.rows ,  // 从自己的js中引入
            // data: [{"数据加载中":"数据加载中",}],
            page: 1,
            colModel: datajson.cols,
        //     colModel:[
        // {
        //     "label":"数据加载中",
        //     "sorttype":"float",
        //     "name":"数据加载中",
        //     "key":"true",
        //     "align":"center",
        //     "frozen":true,
        //     "searchoptions":{
        //         "sopt":[
        //             "cn",
        //             "eq",
        //             "ne",
        //             "le",
        //             "lt",
        //             "gt",
        //             "ge",
        //             "bw",
        //             "bn",
        //             "nc",
        //             "ew",
        //             "en"
        //         ]
        //     }
        // },],
            loadonce: true,
            // viewrecords: true,
            width:"100%",
            autowidth:true,
            height:"100%",
            rowNum: 1000,
            // multiSort: true, // 允许多列排序
            // sortable: true,// 列拖动排序
            viewrecords: true,
            colMenu : true,

            autoScroll: false,//  如果需要冻结列必须使用,当autoScroll和shrinkToFit均为false时，会出现行滚动条
            shrinkToFit: false, // 如果需要冻结列必须使用 must be set with frozen columns, otherwise columns will be shrank to fit the grid width
            pager: "#jqGridPager"
        });
        // activate the toolbar searching
        $('#jqGrid').jqGrid('filterToolbar',{
            // JSON stringify all data from search, including search toolbar operators
            stringResult: true,
            // instuct the grid toolbar to show the search options
            searchOperators: true
        });
        $('#jqGrid').jqGrid('navGrid', '#jqGridPager',{},{},{},{},
            { multipleSearch : true	,
            stringResult : true,
            multipleGroup : false
            }
        );
        setTimeout( function() {
            // $('#jqGrid').jqGrid('autoSelect', {
            //     field : "progress_nm"
            // });
        }, 50);
        // });

        // // 选择显示哪些列
        // jQuery("#jqGrid").jqGrid('navButtonAdd','#jqGridPager',{
        //     caption: "Columns",
        //     title: "Reorder Columns",
        //     onClickButton : function (){
        //         jQuery("#jqGrid").jqGrid('columnChooser');
        //     }
        // });



        //表格宽度自适应
        $(function(){
            blankwidth = 30;
            blankheight = 120;
            $("#jqGrid").setGridWidth($(window).width()-blankwidth);
            $("#jqGrid").setGridHeight($(window).height()-blankheight);

            $(window).resize(function(){
                $("#jqGrid").setGridWidth($(window).width()-blankwidth);
                $("#jqGrid").setGridHeight($(window).height()-blankheight);
            });
        });

        // 导出表格
        $("#export").on("click", function(){
        $("#jqGrid").jqGrid("exportToExcel",{
            includeLabels : true,
            includeGroupHeader : true,
            includeFooter: true,
            fileName : "jqGridExport.xlsx",
            maxlength : 40 // maxlength for visible string data 
        })
        })

        // 添加序号列
        $("#jqGrid").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center' });

        // 冻结列，同时列配置需要增加frozen: true
        $("#jqGrid").jqGrid("setFrozenColumns");


    });

    // 重新更新数据
    // loadJS('https://gitee.com/liukaigt/mydata/raw/master/others/' + GetQueryString('js','datajson.js'),function(){
    //     // $('#jqGrid').jqGrid('clearGridData');
    //     $('#jqGrid').jqGrid('setGridParam', { colModel: datajson.cols,data: datajson.rows, }).trigger('reloadGrid');
    // });

 
    </script>

</body>
</html>